const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成加js的html
const CleanWebpackPlugin = require('clean-webpack-plugin');//清理文件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');//代码压缩
const ExtractTextPlugin = require("extract-text-webpack-plugin");//将css代码从主程序分离出来

module.exports = {
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        // filename: 'bundle.js',
        // filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: '[name].bundle.js',
        publicPath: '/'
    },
    devtool: 'inline-source-map',//source map,指出映射在源代码中错误的位置
    devServer: {//告诉开发服务器(dev server)，在哪里查找文件
        contentBase: './dist',
        hot: true //模块热替换
    },
    module:{
        rules:[
            {
                test:/\.css$/, //处理css样式
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(png|svg|jpg|gif)$/, //图片处理
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,//字体样式处理
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]
    },
    plugins: [
        //清空dist文件夹
        new CleanWebpackPlugin(['dist']),

        new HtmlWebpackPlugin({
            title: 'Output Management',
            // template:path.resolve(TEM_PATH,'public.html'),
            // chunks: ['comtwo','clear'],
            // filename: 'comtwo.html',
            inject: "body"
        }),

        // 指定公共 bundle 的名称。
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common'
        }),

        //模块热替换
        new webpack.HotModuleReplacementPlugin(),

        //代码压缩
        new UglifyJSPlugin(),

        ////将css代码从主程序分离出来
        new ExtractTextPlugin("styles.css")
    ]
};